<template>
  <div>
    <el-card shadow="hover" style="height:100px" @click="route_visible=true">
      <div align="center">
        <i class="el-icon-s-help" style="font-size:50px;color:#409EFF"></i>
        <p>路由管理</p>
      </div>
    </el-card>
    <el-dialog title="路由管理" v-model="route_visible" width="80%" destroy-on-close>
      <div>
        <el-table
          :data="route_data"
          style="width: 100%;margin-bottom: 20px;"
          size="small"
          @selection-change="selection_route"
          border
          default-expand-all
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="meta.web_title" label="网站标题" sortable></el-table-column>
          <el-table-column prop="name" label="路由名"></el-table-column>
          <el-table-column prop="path" label="路由url"></el-table-column>
          <el-table-column prop="component" label="路由组件位置" width="300"></el-table-column>
          <el-table-column label="显示形式">
            <template #default="scope">
              <el-tag
                :type="scope.row.meta.show_site==1?'success':'warning'"
              >{{scope.row.meta.show_site==1?'框架内':'全屏显示'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="嵌套路由">
            <template #default="scope">
              <el-button
                size="mini"
                type="info"
                @click="view_children_route(scope.row)"
                v-show="scope.row.children!=undefined"
                icon="el-icon-view"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column label="管理" width="200">
            <template #header>
              <el-button-group>
                <el-button
                  type="primary"
                  size="mini"
                  title="添加路由"
                  @click="add_route()"
                  icon="el-icon-plus"
                ></el-button>
                <el-button
                  type="warning"
                  size="mini"
                  @click="get_json()"
                  title="导出json"
                  icon="el-icon-finished"
                ></el-button>
              </el-button-group>
            </template>
            <template #default="scope">
              <el-button
                type="success"
                size="mini"
                @click="edit_route(scope)"
                icon="el-icon-edit-outline"
              ></el-button>
              <el-button
                type="primary"
                size="mini"
                @click="add_children_route(scope)"
                icon="el-icon-plus"
              ></el-button>
              <el-popconfirm
                confirmButtonText="删除"
                cancelButtonText="取消"
                confirmButtonType="success"
                cancelButtonType="warning"
                @confirm="del_route(scope)"
                title="确定删除该路由吗？"
              >
                <template #reference>
                  <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 子路由 -->
      <el-dialog
        :title="children_route_table_title"
        v-model="route_children_visible"
        width="80%"
        destroy-on-close
      >
        <div>
          <el-table
            :data="children_route_data"
            style="width: 100%;margin-bottom: 20px;"
            size="small"
            border
          >
            <el-table-column prop="meta.web_title" label="网站标题" sortable></el-table-column>
            <el-table-column prop="name" label="路由名"></el-table-column>
            <el-table-column prop="path" label="路由url"></el-table-column>
            <el-table-column prop="component" label="路由组件位置" width="300"></el-table-column>
            <el-table-column label="显示形式">
              <template #default="scope">
                <el-tag
                  :type="scope.row.meta.show_site==1?'success':'warning'"
                >{{scope.row.meta.show_site==1?'框架内':'全屏显示'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="管理" width="150">
              <template #default="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="edit_route(scope)"
                  icon="el-icon-edit-outline"
                ></el-button>
                <el-popconfirm
                  confirmButtonText="删除"
                  cancelButtonText="取消"
                  confirmButtonType="success"
                  cancelButtonType="warning"
                  @confirm="del_route(scope)"
                  title="确定删除该路由吗？"
                >
                  <template #reference>
                    <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <Routeedit v-model="admin.edit.status" :data="admin.edit"></Routeedit>
      <Addroute v-model="add_status" :add_data="add_status"></Addroute>
      <AddChildrenRoute v-model="add_children_status.status" :data="add_children_status"></AddChildrenRoute>
    </el-dialog>
  </div>
</template>
<script>
import Routeedit from "./route_admin_sub/Routeedit.vue";
import Addroute from "./route_admin_sub/Addroute.vue";
import AddChildrenRoute from "./route_admin_sub/AddChildrenRoute.vue";
export default {
  components: {
    Routeedit,
    Addroute,
    AddChildrenRoute
  },
  data() {
    return {
      route_visible: false,
      route_children_visible: false,
      children_route_data: [],
      children_route_table_title: "",
      selectio_data: [],
      route_data: [],
      add_status: false,
      add_children_status: {
        index: "",
        status: false
      },
      admin: {
        edit: {
          index: "",
          status: false
        }
      }
    };
  },
  methods: {
    view_children_route(data) {
      this.children_route_table_title =
        "《" + data.meta.web_title + "》嵌套路由管理";
      this.children_route_data = data.children;
      this.route_children_visible = true;
    },
    edit_route(scope) {
      this.admin.edit = {
        status: true,
        index: this.get_index(scope.row)
      };
    },
    add_children_route(scope) {
      this.add_children_status = {
        index: this.get_index(scope.row),
        status: true
      };
    },
    del_route(scope) {
      const index = this.get_index(scope.row);
      if (typeof index == "number") {
        this.route_data.splice(index, 1);
      } else {
        this.route_data[index.index].children.splice(index.i, 1);
      }
      sessionStorage.setItem("route_data", JSON.stringify(this.route_data));
      this.$router.go(0);
    },
    get_index(row) {
      for (let index = 0; index < this.route_data.length; index++) {
        if (this.route_data[index].children != undefined) {
          if (this.route_data[index] == row) {
            return index;
          } else {
            for (let i = 0; i < this.route_data[index].children.length; i++) {
              if (this.route_data[index].children[i] == row) {
                return { index, i };
              }
            }
          }
        } else if (this.route_data[index] == row) {
          return index;
        }
      }
    },
    add_route() {
      this.add_status = true;
    },
    selection_route(data) {
      this.selectio_data = data;
    },
    get_json() {
      if (this.selectio_data.length > 0) {
        this.$message.success("打印数据成功请查看控制台");
        console.log(JSON.stringify(this.selectio_data));
      } else {
        this.$message.warning("请先选择要导出的信息");
      }
    }
  },
  mounted() {
    this.route_data = JSON.parse(sessionStorage.getItem("route_data"));
  }
};
</script>
<style scoped>
.el-card {
  cursor: pointer;
}
</style>